<template>
  <view
    class="floating-ball"
    :style="{ left: x + 'px', top: y + 'px' }"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
    @tap="goToAITryOn"
  >
    <image src="/static/images/doubao.png" mode="aspectFit" class="ball-icon"></image>
  </view>
</template>

<script>
export default {
  name: 'FloatingBall',
  props: {
    // 目标页面路径
    targetPage: {
      type: String,
      default: '/pages/AI_try_on/new_tryai'
    }
  },
  data() {
    return {
      // 初始位置，默认在右下角
      x: uni.getSystemInfoSync().windowWidth - 80,
      y: uni.getSystemInfoSync().windowHeight - 200,
      // 触摸开始时的位置
      startX: 0,
      startY: 0,
      // 球的位置
      ballX: 0,
      ballY: 0,
      // 是否被移动过
      isMoved: false,
      // 窗口信息
      windowWidth: 0,
      windowHeight: 0,
      // 球的大小
      ballSize: 60
    };
  },
  created() {
    // 获取窗口信息
    const sysInfo = uni.getSystemInfoSync();
    this.windowWidth = sysInfo.windowWidth;
    this.windowHeight = sysInfo.windowHeight;
    
    // 设置初始位置
    this.ballX = this.x;
    this.ballY = this.y;
  },
  methods: {
    touchStart(e) {
      this.isMoved = false;
      const touch = e.touches[0];
      this.startX = touch.clientX;
      this.startY = touch.clientY;
      this.ballX = this.x;
      this.ballY = this.y;
    },
    
    touchMove(e) {
      const touch = e.touches[0];
      const deltaX = touch.clientX - this.startX;
      const deltaY = touch.clientY - this.startY;
      
      // 如果移动距离太小，不认为是移动
      if (Math.abs(deltaX) < 5 && Math.abs(deltaY) < 5) return;
      
      this.isMoved = true;
      
      // 计算新的位置
      let newX = this.ballX + deltaX;
      let newY = this.ballY + deltaY;
      
      // 限制在屏幕范围内
      newX = Math.max(0, Math.min(newX, this.windowWidth - this.ballSize));
      newY = Math.max(0, Math.min(newY, this.windowHeight - this.ballSize));
      
      this.x = newX;
      this.y = newY;
    },
    
    touchEnd(e) {
      // 判断是否需要吸附到边缘
      if (this.isMoved) {
        // 如果x坐标接近屏幕中间，则吸附到离得最近的边缘
        if (this.x > this.windowWidth / 3 && this.x < (this.windowWidth * 2 / 3)) {
          this.x = this.x < this.windowWidth / 2 ? 0 : this.windowWidth - this.ballSize;
        }
      }
    },
    
    // 跳转到时空衣橱页面
    goToAITryOn() {
      if (this.isMoved) return; // 如果是拖动操作，不触发跳转
      
      uni.navigateTo({
        url: this.targetPage,
        fail: (err) => {
          console.error('跳转到时空衣橱页面失败:', err);
          // 尝试用switchTab
          uni.switchTab({
            url: this.targetPage,
            fail: (err2) => {
              console.error('尝试switchTab跳转也失败:', err2);
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style>
.floating-ball {
  position: fixed;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5px);
  z-index: 999;
  transition: transform 0.2s ease;
}

.floating-ball:active {
  transform: scale(0.95);
}

.ball-icon {
  width: 36px;
  height: 36px;
}
</style> 